<template>
  <div class="orders-container">
    <div class="header">
      <h2>订单管理</h2>
    </div>

    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="订单号">
        <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option label="待付款" value="PENDING" />
          <el-option label="已付款" value="PAID" />
          <el-option label="已发货" value="SHIPPED" />
          <el-option label="已完成" value="COMPLETED" />
          <el-option label="已取消" value="CANCELLED" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 订单列表 -->
    <el-table
      v-loading="loading"
      :data="orders"
      border
      style="width: 100%"
    >
      <el-table-column prop="orderId" label="订单ID" width="100" />
      <el-table-column prop="orderNo" label="订单编号" width="180" />
      <el-table-column prop="shippingName" label="收货人" width="120" />
      <el-table-column prop="totalAmount" label="订单金额" width="120">
        <template #default="{ row }">
          {{ formatPrice(row.totalAmount) }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="购买数量" width="100" />
      <el-table-column prop="status" label="订单状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="280">
        <template #default="{ row }">
          <el-button-group>
            <!-- 查看按钮对所有角色可见 -->
            <el-button type="primary" link @click="handleView(row)">查看</el-button>
            
            <!-- 修改按钮 - 确保所有用户只能编辑自己的待付款订单 -->
            <el-button 
              v-if="canEditOrder(row)"
              type="primary" 
              link 
              :disabled="row.status !== 'PENDING'"
              @click="handleEdit(row)"
            >修改</el-button>
            
            <!-- 付款按钮 - 确保所有用户只能付款自己的待付款订单 -->
            <el-button 
              v-if="canEditOrder(row)"
              type="success" 
              link 
              @click="handlePay(row)"
            >付款</el-button>
            
            <!-- 发货按钮 - 只对已付款状态的订单显示，超级管理员和管理员可见 -->
            <el-button 
              v-if="canManageOrder(row) && row.status === 'PAID'" 
              type="warning" 
              link 
              @click="handleShipping(row)"
            >
              发货
            </el-button>
            
            <!-- 完成按钮 - 只对已发货状态的订单显示，超级管理员和管理员可见 -->
            <el-button 
              v-if="canManageOrder(row) && row.status === 'SHIPPED'" 
              type="success" 
              link 
              @click="handleComplete(row)"
            >
              完成
            </el-button>
            
            <!-- 取消按钮 - 确保所有用户只能取消自己的待付款订单 -->
            <el-button 
              v-if="canEditOrder(row)"
              type="danger" 
              link 
              @click="handleCancel(row)"
            >取消</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </div>

    <!-- 订单表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="'修改订单数量'"
      width="400px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="订单编号">
          <span>{{ form.orderNo }}</span>
        </el-form-item>
        <el-form-item label="商品名称">
          <span>{{ form.productName }}</span>
        </el-form-item>
        <el-form-item label="单价">
          <span>{{ formatPrice(form.productPrice) }}</span>
        </el-form-item>
        <el-form-item label="购买数量" prop="quantity">
          <el-input-number 
            v-model="form.quantity" 
            :min="1"
            :max="999"
            @change="handleQuantityChange"
          />
        </el-form-item>
        <el-form-item label="总金额">
          <span>{{ formatPrice(form.totalAmount) }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="订单详情"
      width="760px"
      destroy-on-close
      @open="() => console.log('对话框打开事件触发')"
      @closed="() => console.log('对话框关闭事件触发')"
    >
      <div v-if="currentOrder" class="order-detail" v-loading="detailLoading">
        <div class="detail-header">
          <div class="order-info">
            <h3>订单号: {{ currentOrder.orderNo }}</h3>
            <p>创建时间: {{ formatDate(currentOrder.createTime) }}</p>
            <p>状态: 
              <el-tag :type="getOrderStatusType(currentOrder.status)">
                {{ getOrderStatusText(currentOrder.status) }}
              </el-tag>
            </p>
            <p v-if="currentOrder.paymentTime">支付时间: {{ formatDate(currentOrder.paymentTime) }}</p>
          </div>
          <div class="order-amount">
            <h3>订单总额: {{ formatPrice(currentOrder.totalAmount) }}</h3>
            <p v-if="currentOrder.username">购买用户: {{ currentOrder.username }}</p>
            <p v-if="currentOrder.paymentMethod">支付方式: {{ currentOrder.paymentMethod || '在线支付' }}</p>
          </div>
        </div>
        
        <el-divider />
        
        <h4>商品信息</h4>
        <el-table
          :data="currentOrder.items || []"
          border
          style="width: 100%"
          v-loading="!currentOrder.items || currentOrder.items.length === 0"
        >
          <el-table-column prop="productName" label="商品名称" min-width="120" />
          <el-table-column prop="productImage" label="商品图片" width="100">
            <template #default="{ row }">
              <el-image 
                v-if="row.productImage" 
                :src="row.productImage" 
                :preview-src-list="[row.productImage]"
                style="width: 50px; height: 50px"
                fit="cover"
              />
              <span v-else>无图片</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="100">
            <template #default="{ row }">
              {{ formatPrice(row.price) }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column label="小计" width="120">
            <template #default="{ row }">
              {{ formatPrice(row.price * row.quantity) }}
            </template>
          </el-table-column>
        </el-table>
        
        <div v-if="!currentOrder.items || currentOrder.items.length === 0" class="empty-items-message">
          <p>正在加载商品信息...</p>
        </div>
        
        <el-divider />
        
        <h4>收货信息</h4>
        <div class="address-info">
          <p><strong>收货人:</strong> {{ currentOrder.receiverName || currentOrder.shippingName || '未提供' }}</p>
          <p><strong>联系电话:</strong> {{ currentOrder.receiverPhone || currentOrder.shippingPhone || '未提供' }}</p>
          <p><strong>收货地址:</strong> {{ currentOrder.receiverAddress || currentOrder.shippingAddress || '未提供' }}</p>
        </div>
        
        <div v-if="currentOrder.note" class="order-note">
          <h4>订单备注</h4>
          <p>{{ currentOrder.note }}</p>
        </div>
        
        <div v-if="currentOrder.status === 'SHIPPED' || currentOrder.status === 'COMPLETED'" class="shipping-info">
          <h4>物流信息</h4>
          <p><strong>物流公司:</strong> {{ currentOrder.shippingCompany || '暂无信息' }}</p>
          <p><strong>物流单号:</strong> {{ currentOrder.trackingNumber || '暂无信息' }}</p>
          <p><strong>发货时间:</strong> {{ formatDate(currentOrder.shippingTime) || '暂无信息' }}</p>
          <p v-if="currentOrder.status === 'COMPLETED'"><strong>完成时间:</strong> {{ formatDate(currentOrder.completeTime) || '暂无信息' }}</p>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          
          <!-- 付款按钮，只有订单属于当前用户且状态为待支付时才显示 -->
          <el-button 
            v-if="currentOrder && canEditOrder(currentOrder)" 
            type="success" 
            @click="handlePay(currentOrder)"
          >
            付款
          </el-button>
          
          <!-- 发货按钮，只有管理员或超级管理员且订单状态为已支付时才显示 -->
          <el-button 
            v-if="currentOrder && canManageOrder(currentOrder) && currentOrder.status === 'PAID'" 
            type="warning" 
            @click="handleShipping(currentOrder)"
          >
            发货
          </el-button>
          
          <!-- 完成按钮，只有管理员或超级管理员且订单状态为已发货时才显示 -->
          <el-button 
            v-if="currentOrder && canManageOrder(currentOrder) && currentOrder.status === 'SHIPPED'" 
            type="success" 
            @click="handleComplete(currentOrder)"
          >
            完成
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrders, getOrder, updateOrder, deleteOrder, updateOrderQuantity, payOrder, updateOrderShippingStatus, cancelOrder, updateOrderStatus, completeOrder, shipOrder } from '@/api/order'
import { formatDate, formatPrice } from '@/utils/format'
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'

// 初始化 store
const userStore = useUserStore()
const router = useRouter()

// 数据列表
const orders = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  status: ''
})

// 表单对话框
const dialogVisible = ref(false)
const dialogType = ref('add')
const formRef = ref(null)
const form = reactive({
  orderId: '',
  orderNo: '',
  shippingName: '',
  totalAmount: 0,
  status: ''
})

// 表单验证规则
const rules = {
  quantity: [
    { required: true, message: '请输入购买数量', trigger: 'blur' },
    { type: 'number', min: 1, message: '数量必须大于0', trigger: 'blur' }
  ]
}

// 发货对话框（移除）
const currentOrder = ref(null)

// 添加detailLoading状态
const detailLoading = ref(false);

// 添加viewDialogVisible的定义
const viewDialogVisible = ref(false)

// 获取订单列表
const fetchOrders = async () => {
  // 如果没有登录，不进行请求
  if (!userStore.isLoggedIn) {
    console.warn('用户未登录，无法获取订单列表');
    ElMessage.warning('请先登录后再查看订单');
    router.push('/login');
    return;
  }

  loading.value = true;
  try {
    // 构建查询参数
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    };
    
    // 只有当有值时才添加搜索条件
    if (searchForm.orderNo && searchForm.orderNo.trim()) {
      params.orderNo = searchForm.orderNo.trim();
    }
    
    if (searchForm.status) {
      params.status = searchForm.status;
    }
    
    // 添加所有可能的用户标识字段，确保所有用户（包括管理员和超级管理员）都只能查看自己的订单
    const userIdentifiers = {};
    
    // 用户ID优先
    if (userStore.userId) {
      userIdentifiers.userId = userStore.userId;
    }
    
    // 用户名作为备选标识
    if (userStore.username) {
      userIdentifiers.username = userStore.username;
      userIdentifiers.createdBy = userStore.username;
      userIdentifiers.creator = userStore.username; // 可能的额外字段
      userIdentifiers.buyer = userStore.username;   // 可能的额外字段
    }
    
    // 将所有标识字段添加到查询参数中
    Object.assign(params, userIdentifiers);
    
    console.log('发送请求参数:', params);
    try {
      const res = await getOrders(params);
      console.log('订单数据响应:', res);
    
    if (res.code === 200) {
        processOrdersResponse(res);
      } else {
        handleEmptyOrders('获取订单列表失败: ' + (res.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取订单列表请求失败:', error);
      handleEmptyOrders('获取订单列表失败: ' + (error.message || '未知错误'));
    }
  } catch (error) {
    console.error('获取订单列表过程中出错:', error);
    handleEmptyOrders('处理订单数据时出错');
  } finally {
    loading.value = false;
  }
};

// 处理订单响应数据
const processOrdersResponse = (res) => {
  // 处理不同的响应格式
  let orderData = [];
  
  if (Array.isArray(res.data)) {
    orderData = res.data;
    total.value = res.data.length;
    console.log('处理数组格式的订单数据，条数:', orderData.length);
    
    // 如果直接返回数组，且包含分页参数，计算总数
    if (orderData.length > pageSize.value) {
      total.value = orderData.length + pageSize.value;
      console.log('直接返回数组但超过页大小，调整总数:', total.value);
    }
  } else if (res.data && res.data.records) {
    orderData = res.data.records;
    total.value = res.data.total || res.data.records.length;
    console.log('处理分页格式的订单数据，条数:', orderData.length, '总数:', total.value);
    
    // 确保总数至少比当前数据多
    if (total.value <= orderData.length && orderData.length > 0) {
      total.value = orderData.length + 1;
      console.log('分页返回数据但总数不足，调整总数:', total.value);
    }
  } else if (res.data) {
    orderData = [res.data];
    total.value = 1;
    console.log('处理单个订单数据');
  } else {
    console.log('没有订单数据');
    orderData = [];
    total.value = 0;
  }
  
  if (orderData.length === 0) {
    console.log('订单列表为空');
    ElMessage.info('没有符合条件的订单');
  } else {
    console.log('获取到订单列表，详细信息:', orderData);
    
    // 如果是普通用户，检查每个订单是否归属于当前用户
    if (userStore.isUser) {
      orderData.forEach((order, index) => {
        const isOwner = isUserOrder(order);
        console.log(`订单[${index}] ${order.orderNo} - 是否归属于当前用户: ${isOwner}`);
      });
    }
  }
  
  // 对订单列表进行排序，按ID从小到大排序
  const allOrders = [...orderData].sort((a, b) => {
    // 确保提取正确的ID字段并转为数字
    let idA = a.orderId !== undefined ? Number(a.orderId) : 0;
    let idB = b.orderId !== undefined ? Number(b.orderId) : 0;
    
    // 确保是数字类型
    idA = isNaN(idA) ? 0 : idA;
    idB = isNaN(idB) ? 0 : idB;
    
    return idA - idB; // 升序排列
  });
  
  console.log('再次确认排序后的订单ID列表:', allOrders.map(o => o.orderId).join(', '));
  
  // 判断是否需要在前端处理分页
  const needsClientPagination = allOrders.length > pageSize.value;
  
  if (needsClientPagination) {
    console.log('检测到需要前端分页处理，总数据量:', allOrders.length);
    
    // 计算当前页应该显示的数据范围
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = Math.min(startIndex + pageSize.value, allOrders.length);
    
    // 从全部数据中截取当前页数据
    orders.value = allOrders.slice(startIndex, endIndex);
    
    // 设置正确的总数
    total.value = allOrders.length;
    
    console.log(`前端分页: 第${currentPage.value}页，起始索引:${startIndex}，结束索引:${endIndex}`);
    console.log('当前页订单ID:', orders.value.map(o => o.orderId).join(', '));
  } else {
    // 如果数据量较小或后端已处理分页，直接使用数据
    orders.value = allOrders;
    
    // 如果一页应该显示 pageSize 条数据，但当前显示了更多，说明分页有问题
    // 我们可以手动限制当前页显示的数据量
    if (orders.value.length > pageSize.value) {
      console.log(`订单数据超过页大小(${pageSize.value})，进行截断处理...`);
      const startIndex = (currentPage.value - 1) * pageSize.value;
      const endIndex = startIndex + pageSize.value;
      
      // 保存完整数据以便调试
      const fullOrders = [...orders.value];
      
      // 截取当前页应该显示的数据
      orders.value = fullOrders.slice(startIndex, endIndex);
      
      // 确保总数设置正确
      total.value = Math.max(total.value, fullOrders.length);
      
      console.log(`页数据截断: 从${startIndex}到${endIndex}, 截断后数据量: ${orders.value.length}, 总数: ${total.value}`);
    }
  }
  
  // 如果仍然只有一页，但有数据，至少显示两页
  if (total.value <= pageSize.value && orders.value.length === pageSize.value) {
    total.value = pageSize.value + 1;
    console.log('确保至少有两页的总数:', total.value);
  }
  
  // 最后检查一下当前页的排序是否正确
  const currentPageIds = orders.value.map(o => Number(o.orderId));
  console.log('当前页最终显示的订单ID:', currentPageIds.join(', '));
  
  // 验证排序是否正确
  const isSorted = currentPageIds.every((id, i) => i === 0 || id > currentPageIds[i - 1]);
  console.log('当前页订单ID是否正确升序排列:', isSorted);
  
  if (!isSorted) {
    console.warn('当前页订单排序异常，手动再次排序');
    orders.value.sort((a, b) => {
      let idA = Number(a.orderId) || 0;
      let idB = Number(b.orderId) || 0;
      return idA - idB;
    });
    console.log('重新排序后的订单ID:', orders.value.map(o => o.orderId).join(', '));
  }
  
  console.log('最终处理后的订单数据:', orders.value);
};

// 处理空订单或错误情况
const handleEmptyOrders = (message) => {
  orders.value = [];
  total.value = 0;
  console.warn(message);
  ElMessage.error(message);
};

// 判断是否为当前用户的订单
const isUserOrder = (order) => {
  // 对于普通用户，只能查看和管理自己的订单
  const userId = userStore.userId;
  const username = userStore.username;
  
  if (!userId && !username) return false;
  
  // 检查订单的userId字段或username字段
  if (order.userId && order.userId == userId) {
    return true;
  }
  if (order.username && order.username === username) {
    return true;
  }
  if (order.createdBy && order.createdBy === username) {
    return true;
  }
  
  console.log('订单信息:', order);
  console.log('当前用户:', {userId, username, role: userStore.role});
  
  return false;
}

// 判断当前用户是否可以编辑订单
const canEditOrder = (order) => {
  // 只有订单所有者可以编辑订单，且订单必须是待付款状态
  return isUserOrder(order) && order.status === 'PENDING';
}

// 判断当前用户是否可以查看订单
const canViewOrder = (order) => {
  // 管理员和超级管理员可以查看所有订单
  if (userStore.isAdmin || userStore.isSuperAdmin) {
    return true;
  }
  
  // 普通用户只能查看自己的订单
  return isUserOrder(order);
}

// 判断当前用户是否可以管理订单（发货和完成操作）
const canManageOrder = (order) => {
  // 只有管理员和超级管理员可以管理订单
  return userStore.isAdmin || userStore.isSuperAdmin;
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  console.log('执行搜索，条件:', {
    orderNo: searchForm.orderNo,
    status: searchForm.status
  })
  fetchOrders()
}

// 重置搜索
const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.status = ''
  currentPage.value = 1
  console.log('重置搜索条件')
  fetchOrders()
}

// 编辑订单
const handleEdit = (row) => {
  // 检查权限
  if (!canEditOrder(row)) {
    ElMessage.warning('您没有权限修改此订单')
    return
  }
  
  if (row.status !== 'PENDING') {
    ElMessage.warning('只有待付款状态的订单可以修改')
    return
  }
  
  dialogType.value = 'edit'
  Object.assign(form, row)
  dialogVisible.value = true
}

// 查看订单
const handleView = (row) => {
  console.log('查看订单:', row);
  
  // 检查权限
  if (!canViewOrder(row)) {
    console.warn('用户无权查看此订单，用户角色:', userStore.role);
    ElMessage.warning('您只能查看自己的订单');
    return;
  }
  
  // 设置当前选中的订单，并创建深拷贝避免引用问题
  currentOrder.value = JSON.parse(JSON.stringify(row));
  
  // 打开对话框
  viewDialogVisible.value = true;
  console.log('对话框状态设置为:', viewDialogVisible.value);
  
  // 获取详细订单信息
  detailLoading.value = true;
  
  const orderId = row.orderId || row.id;
  if (!orderId) {
    console.error('订单ID不存在，无法获取详情');
    ElMessage.warning('无法获取订单详情：订单ID不存在');
    detailLoading.value = false;
    
    // 即使没有ID，也尝试显示已有信息
    createOrderItems();
    return;
  }
  
  console.log('获取订单详情，ID:', orderId);
  getOrder(orderId)
    .then(res => {
      console.log('获取到订单详情响应:', res);
      
      if (res.code === 200 && res.data) {
        // 更新当前订单信息
        const orderDetail = res.data;
        
        // 合并原始数据和详细数据，确保所有字段都存在
        currentOrder.value = { ...currentOrder.value, ...orderDetail };
        
        console.log('合并后的订单详情:', currentOrder.value);
        
        // 如果订单项仍然为空，创建一个模拟的订单项
        if (!currentOrder.value.items || currentOrder.value.items.length === 0) {
          console.log('订单详情中没有商品信息，创建模拟数据');
          createOrderItems();
        }
      } else {
        console.warn('获取订单详情失败:', res.message || '未知错误');
        ElMessage.warning('获取订单详情失败: ' + (res.message || '未知错误'));
        
        // 创建一个基本的订单项，避免一直显示加载中
        createOrderItems();
      }
    })
    .catch(error => {
      console.error('获取订单详情出错:', error);
      ElMessage.error('获取订单详情失败: ' + (error.message || '未知错误'));
      
      // 创建一个基本的订单项，避免一直显示加载中
      createOrderItems();
    })
    .finally(() => {
      detailLoading.value = false;
    });
}

// 创建订单项
const createOrderItems = () => {
  if (!currentOrder.value) return;
  
  // 如果订单项为空，创建一个基本的订单项
  if (!currentOrder.value.items || currentOrder.value.items.length === 0) {
    // 尝试从不同字段中提取商品信息
    const productName = currentOrder.value.productName || 
                        currentOrder.value.product?.name || 
                        currentOrder.value.productTitle || 
                        '未知商品';
    
    const productPrice = currentOrder.value.productPrice || 
                         currentOrder.value.price || 
                         (currentOrder.value.totalAmount ? (currentOrder.value.totalAmount / (currentOrder.value.quantity || 1)) : 0);
    
    const quantity = currentOrder.value.quantity || 1;
    
    const productImage = currentOrder.value.productImage || 
                         currentOrder.value.product?.image || 
                         currentOrder.value.image || 
                         '';
    
    currentOrder.value.items = [{
      productName: productName,
      price: productPrice,
      quantity: quantity,
      productImage: productImage,
      subtotal: productPrice * quantity
    }];
    
    console.log('创建的订单项:', currentOrder.value.items);
  }
}

// 处理数量变化
const handleQuantityChange = (value) => {
  if (value <= 0) {
    ElMessage.warning('购买数量必须大于0')
    return
  }
  form.totalAmount = form.productPrice * value
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 显示确认对话框
    await ElMessageBox.confirm(
      `确定要将订单 ${form.orderNo} 的购买数量修改为 ${form.quantity} 吗？`,
      '确认修改',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    try {
      await updateOrderQuantity(form.orderId, form.quantity)
      ElMessage.success('修改成功')
      dialogVisible.value = false
      fetchOrders()
    } catch (error) {
      const errorMsg = error.response?.data?.message || error.message || '未知错误'
      if (errorMsg.includes('库存不足')) {
        ElMessage.error('商品库存不足，请重新选择数量')
      } else if (errorMsg.includes('订单不存在')) {
        ElMessage.error('订单不存在或已被删除')
        dialogVisible.value = false
        fetchOrders()
      } else {
        ElMessage.error('修改失败：' + errorMsg)
      }
    }
  } catch (error) {
    if (error === 'cancel') return
    console.error('提交失败:', error)
    ElMessage.error('表单验证失败，请检查输入')
  }
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchOrders()
}

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchOrders()
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    'PENDING': 'warning',
    'PAID': 'success',
    'SHIPPED': 'primary',
    'COMPLETED': 'success',
    'CANCELLED': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': '待付款',
    'PAID': '已付款',
    'SHIPPED': '已发货',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || status
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const typeMap = {
    'PENDING': 'warning',
    'PAID': 'success',
    'SHIPPED': 'primary',
    'COMPLETED': 'success',
    'CANCELLED': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    'PENDING': '待付款',
    'PAID': '已付款',
    'SHIPPED': '已发货',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || status
}

// 处理付款
const handlePay = async (row) => {
  console.log('尝试付款操作:', row);
  
  // 检查权限
  if (!canEditOrder(row)) {
    ElMessage.warning('您没有权限对此订单付款');
    return;
  }
  
  if (row.status !== 'PENDING') {
    ElMessage.warning('只有待付款状态的订单可以付款');
    return;
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要支付订单 ${row.orderNo} 吗？订单金额：${formatPrice(row.totalAmount)}`,
      '确认支付',
      {
        confirmButtonText: '确认支付',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    try {
      console.log('发送付款请求，订单ID:', row.orderId);
      await payOrder(row.orderId);
      ElMessage.success('支付成功');
      fetchOrders(); // 刷新订单列表
    } catch (error) {
      console.error('支付请求失败:', error);
      const errorMsg = error.response?.data?.message || error.message || '未知错误';
      if (errorMsg.includes('订单不存在')) {
        ElMessage.error('订单不存在或已被删除');
      } else if (errorMsg.includes('状态')) {
        ElMessage.error('订单状态已改变，无法支付');
      } else {
        ElMessage.error('支付失败：' + errorMsg);
      }
      fetchOrders(); // 刷新订单列表以获取最新状态
    }
  } catch (error) {
    if (error === 'cancel') return;
    console.error('支付操作被用户取消或失败:', error);
  }
};

// 处理发货
const handleShipping = (row) => {
  // 检查权限
  if (!canManageOrder(row)) {
    ElMessage.warning('您没有权限进行发货操作')
    return
  }
  
  if (row.status !== 'PAID') {
    ElMessage.warning('只有已付款的订单可以进行发货操作')
    return
  }
  
  // 直接显示确认对话框
  ElMessageBox.confirm(
    `确定要将订单 ${row.orderNo} 标记为已发货吗？`,
    '确认发货',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  )
  .then(async () => {
    try {
      await updateOrderShippingStatus(row.orderId, 'SHIPPED')
      ElMessage.success('订单已发货')
      fetchOrders() // 刷新订单列表
    } catch (error) {
      const errorMsg = error.response?.data?.message || error.message || '未知错误'
      if (errorMsg.includes('订单不存在')) {
        ElMessage.error('订单不存在或已被删除')
      } else if (errorMsg.includes('状态')) {
        ElMessage.error('订单状态已改变，无法进行此操作')
      } else {
        ElMessage.error('操作失败：' + errorMsg)
      }
      fetchOrders() // 刷新订单列表以获取最新状态
    }
  })
  .catch(() => {
    // 用户取消操作
  })
}

// 处理完成订单
const handleComplete = (row) => {
  // 检查权限
  if (!canManageOrder(row)) {
    ElMessage.warning('您没有权限进行完成操作')
    return
  }
  
  if (row.status !== 'SHIPPED') {
    ElMessage.warning('只有已发货的订单可以标记为已完成')
    return
  }
  
  // 显示确认对话框
  ElMessageBox.confirm(
    `确定要将订单 ${row.orderNo} 标记为已完成吗？`,
    '确认完成',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      type: 'info'
    }
  )
  .then(async () => {
    try {
      // 使用 completeOrder API
      await completeOrder(row.orderId)
      ElMessage.success('订单已完成')
      fetchOrders() // 刷新订单列表
    } catch (error) {
      const errorMsg = error.response?.data?.message || error.message || '未知错误'
      if (errorMsg.includes('订单不存在')) {
        ElMessage.error('订单不存在或已被删除')
      } else if (errorMsg.includes('状态')) {
        ElMessage.error('订单状态已改变，无法进行此操作')
      } else {
        ElMessage.error('操作失败：' + errorMsg)
      }
      fetchOrders() // 刷新订单列表以获取最新状态
    }
  })
  .catch(() => {
    // 用户取消操作
  })
}

// 处理取消
const handleCancel = (row) => {
  console.log('尝试取消订单:', row);
  
  // 检查权限
  if (!canEditOrder(row)) {
    ElMessage.warning('您没有权限取消此订单');
    return;
  }
  
  if (row.status !== 'PENDING') {
    ElMessage.warning('只有待付款状态的订单可以取消');
    return;
  }
  
  // 显示确认对话框
  ElMessageBox.confirm(
    `确定要取消订单 ${row.orderNo} 吗？`,
    '确认取消',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  .then(async () => {
    try {
      console.log('发送取消订单请求，订单ID:', row.orderId);
      await cancelOrder(row.orderId);
      ElMessage.success('订单已取消');
      fetchOrders();
    } catch (error) {
      console.error('取消订单请求失败:', error);
      const errorMsg = error.response?.data?.message || error.message || '未知错误';
      if (errorMsg.includes('订单不存在')) {
        ElMessage.error('订单不存在或已被删除');
      } else if (errorMsg.includes('状态')) {
        ElMessage.error('订单状态已改变，无法取消');
      } else {
        ElMessage.error('取消失败：' + errorMsg);
      }
      fetchOrders(); // 刷新列表
    }
  })
  .catch(() => {
    console.log('用户取消了操作');
  });
}

onMounted(async () => {
  console.log('订单页面加载，当前用户信息:', {
    isLoggedIn: userStore.isLoggedIn,
    username: userStore.username,
    userId: userStore.userId,
    role: userStore.role
  });
  
  // 确保初始化所有相关变量
  currentOrder.value = null;
  viewDialogVisible.value = false;
  detailLoading.value = false;
  console.log('初始化变量状态:', {
    currentOrder: currentOrder.value,
    viewDialogVisible: viewDialogVisible.value,
    detailLoading: detailLoading.value
  });
  
  // 确保有用户信息
  if (userStore.isLoggedIn) {
    try {
      // 强制获取最新的用户信息，确保拥有完整数据
      console.log('尝试获取最新用户信息...');
      const userInfo = await userStore.getInfo();
      console.log('获取到最新用户信息:', userInfo);
      
      // 不再显示欢迎消息
    } catch (error) {
      console.error('获取用户信息失败:', error);
      ElMessage.warning('获取用户信息失败，可能无法正确显示您的订单');
    }
  } else {
    ElMessage.warning('您尚未登录或登录已过期，请重新登录');
    router.push('/login');
    return;
  }
  
  // 获取订单列表
  fetchOrders();
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables' as *;

.orders-container {
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .search-form {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .order-detail {
    padding: 15px;
    
    h3 {
      font-size: 18px;
      margin-top: 0;
      margin-bottom: 10px;
      color: #303133;
    }
    
    h4 {
      font-size: 16px;
      margin: 15px 0 10px;
      color: #303133;
    }
    
    p {
      margin: 8px 0;
      color: #606266;
    }
  }

  .detail-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e4e7ed;
  }

  .address-info, .order-note, .shipping-info {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #409EFF;
  }
  
  .order-note {
    border-left-color: #67C23A;
  }
  
  .shipping-info {
    border-left-color: #E6A23C;
  }
  
  .empty-items-message {
    text-align: center;
    padding: 20px;
    color: #909399;
    font-style: italic;
  }
}
</style> 